Vite: Use vite hook filter for performance improvements by huang-julien · Pull Request #34022 · storybookjs/storybook

huang-julien · 2026-03-05T08:45:31Z

reopening closed #33900 as changes was started on the wrong branch.

What I did

This PR moves Vite plugins to use HookObjects instead of functions.

For example transform(code, id) would move to

{ 
  transform: {
    filter: { id, code },
    handler(code, id) {}
  }
}

This allows to reduce the overhead between JS/Rust runtimes for vite 8 with rolldown. Implementation within handlers doesn't change, filter() are left within to keep plugins backward compatible with vite < 6.3

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

We need to test all affected vite plugin. Just to ensure they run correctly

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Refactor
- Unified plugin hook shape across MDX, Vite builders, and framework integrations to a consistent filter-and-handler structure. Observable behavior, public signatures, and outputs remain unchanged; build, transform, resolution, mock injection, and component/docgen results continue to work as before. This is an internal consistency change with no user-facing functional impact.

coderabbitai · 2026-03-05T08:52:08Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 24735c0f-8e83-4e52-a72f-3ed8c48ab116

📥 Commits

Reviewing files that changed from the base of the PR and between 381d7c4 and afbf251.

📒 Files selected for processing (1)

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

📝 Walkthrough

Walkthrough

Refactors multiple Vite plugin hooks from function-based signatures to structured objects exposing filter and handler (or resolver filter/handler), preserving existing logic and observable outputs across builder and framework plugins. Public plugin signatures unchanged; transform/resolveId internals now use { filter, handler } shapes.

Changes

Cohort / File(s)	Summary
MDX plugin `code/addons/docs/src/mdx-plugin.ts`	Replaces top-level `transform(src, id)` with `transform: { filter: { id: include }, async handler(src, id) { ... } }`. MDX compilation flow, options, and outputs unchanged.
Builder Vite — export/order & externals `code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts`, `code/builders/builder-vite/src/plugins/storybook-external-globals-plugin.ts`	Converts `transform` functions into `{ filter, async handler }` objects. `storybook-external-globals-plugin` now precomputes `globalsList`/`globalsCodeFilter` at init and moves per-call logic into the handler. Behavior preserved.
Builder Vite — HMR/preview/mocker `code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts`, `code/builders/builder-vite/src/plugins/vite-mock/plugin.ts`, `code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts`	Replaces `transform` and `resolveId` hooks with structured `{ filter, handler }` forms; extracts include/filter regexes; retains prior conditional logic and return values.
Frameworks — Svelte & Vue docgen `code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts`, `code/frameworks/vue3-vite/src/plugins/vue-docgen.ts`	Refactors plugin `transform` to `{ filter: { id: { include, exclude } }, async handler(...) }` while keeping docgen parsing, AST handling, and MagicString injection logic intact.
Frameworks — Vue component meta (complex) `code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts`	Transforms `transform` into `{ filter, async handler }` and preserves complex meta processing: export-name handling, default-export rewriting, nested-schema pruning, de-duplication of exposed entries, and guarded `__docgenInfo` injection. Large internal move to handler structure.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Builder-Webpack5: Fix @vitest/mocker resolution issue #33315 — modifies the same vite-inject-mocker plugin's module resolution and may conflict with changes to resolveId.

✨ Finishing Touches

📝 Generate docstrings (stacked PR)
📝 Generate docstrings (commit on current branch)

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-03-05T09:32:09Z

View your CI Pipeline Execution ↗ for commit 01380b7

Command	Status	Duration	Result
`nx run-many -t compile -c production --parallel=1`	✅ Succeeded	5m 7s	View ↗

☁️ Nx Cloud last updated this comment at 2026-03-11 10:31:26 UTC

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts`:
- Around line 126-132: The guard that tries to detect re-exports incorrectly
matches local exports because it uses unescaped name in loose regexes; update
the check in vue-component-meta.ts that uses the variables name and src so it
only treats true re-exports as re-exports: first escape name with a proper
escapeRegExp helper before composing regexes, and change the first pattern to
require a from clause (e.g. only match "export { ... } from ...") instead of
matching any "export { ... }" so local "export { Foo }" is not treated as a
re-export; also avoid using \b around name (or only apply \b when name matches
JS identifier characters) so names with non-word chars like "$Foo" are handled
correctly. Ensure the modified checks preserve the other re-export branch
(export \* from ...) and still fall back to !src.includes(name) where
appropriate.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 53a0d31a-a051-4e3c-8e5e-5b020a5c4f0c

📥 Commits

Reviewing files that changed from the base of the PR and between 7dd1d96 and 66ba159.

📒 Files selected for processing (9)

code/addons/docs/src/mdx-plugin.ts
code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts
code/builders/builder-vite/src/plugins/storybook-external-globals-plugin.ts
code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts
code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts
code/builders/builder-vite/src/plugins/vite-mock/plugin.ts
code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts
code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
code/frameworks/vue3-vite/src/plugins/vue-docgen.ts

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

storybook-app-bot · 2026-03-09T10:22:25Z

Package Benchmarks

^{Commit: 01380b7, ran on 11 March 2026 at 10:22:03 UTC}

No significant changes detected, all good. 👏

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts`:
- Around line 110-112: Remove the duplicated inline comment so only a single
comment remains; locate the consecutive lines containing "// if there is no
component meta, return undefined" in the vue-component-meta code (around the
function that checks/returns component meta, e.g., the get/resolve component
meta helper) and delete the redundant copy, keeping one clear comment.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 28787cea-a115-4a3a-8256-89284f8a8f6e

📥 Commits

Reviewing files that changed from the base of the PR and between 66ba159 and 381d7c4.

📒 Files selected for processing (2)

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
code/frameworks/vue3-vite/src/plugins/vue-docgen.ts

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

perf: move plugins to object hooks

a3d9190

Sidnioulz added performance issue builder-vite ci:daily Run the CI jobs that normally run in the daily job. labels Mar 5, 2026

Sidnioulz changed the title ~~perf: move plugins to object hooks~~ Vite: Use vite hook filter for performance improvements Mar 5, 2026

Sidnioulz added the maintenance User-facing maintenance tasks label Mar 5, 2026

Merge branch 'next' into perf/vite_8_hook_filter

66ba159

coderabbitai bot reviewed Mar 5, 2026

View reviewed changes

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts Show resolved Hide resolved

huang-julien marked this pull request as draft March 6, 2026 07:55

Merge remote-tracking branch 'origin/next' into perf/vite_8_hook_filter

be3a66f

huang-julien added 2 commits March 9, 2026 16:21

Merge branch 'next' into perf/vite_8_hook_filter

a4efbde

Merge branch 'next' into perf/vite_8_hook_filter

381d7c4

huang-julien marked this pull request as ready for review March 10, 2026 13:32

coderabbitai bot reviewed Mar 10, 2026

View reviewed changes

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts Outdated Show resolved Hide resolved

huang-julien added 4 commits March 10, 2026 15:10

chore: remove duplicated comment

afbf251

Merge branch 'next' into perf/vite_8_hook_filter

d2dadd7

Merge branch 'next' into perf/vite_8_hook_filter

193a5e5

Merge branch 'next' into perf/vite_8_hook_filter

01380b7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Vite: Use vite hook filter for performance improvements#34022

Vite: Use vite hook filter for performance improvements#34022
huang-julien wants to merge 9 commits intonextfrom
perf/vite_8_hook_filter

huang-julien commented Mar 5, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 5, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

nx-cloud bot commented Mar 5, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

storybook-app-bot bot commented Mar 9, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

huang-julien commented Mar 5, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

nx-cloud bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

storybook-app-bot bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

huang-julien commented Mar 5, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 5, 2026 •

edited

Loading

nx-cloud bot commented Mar 5, 2026 •

edited

Loading

storybook-app-bot bot commented Mar 9, 2026 •

edited

Loading